<template>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>Administrator</el-breadcrumb-item>
      <el-breadcrumb-item>test</el-breadcrumb-item>
      <el-breadcrumb-item>jobs</el-breadcrumb-item>
      <el-breadcrumb-item ><a :href="localUrl">#{{ jobid }}</a> </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="mainBox">

    <div class="extraContent">

      <div id="content">
        <el-divider style="margin: 5px 0;"></el-divider>
        <el-button size="small" style="margin-right: 10px;">{{ jobStatus }}</el-button>
        <span>Job #{{ jobid }} create {{ localDate }} by {{ commitUser }}</span>
        <el-divider style="margin: 5px 0;"></el-divider>
      </div>

    </div>

    <div class="sidebar">
      <span>{{jobName}}</span>
      <el-divider style="margin: 10px 0;"></el-divider>
      <span>Commit {{shortid}}</span>
      <br>
      <span> {{ commitMessage }}</span>
      <el-divider style="margin: 10px 0;"></el-divider>
      <i class="el-icon-error" style="color: red; margin: 0 5px;"> </i>
      <span> Pipeline #{{ pipelineId }} for {{jobRef}}</span>
      <el-select placeholder="请选择" style="margin: 10px 5px;">

      </el-select>
      <el-divider style="margin: 10px 0;"></el-divider>
      xxxxxxxxxxxxxxxxxx
      <el-divider style="margin: 10px 0;"></el-divider>

    </div>


  </div>
</template>


<script>
  export default {
    data() {
      return {
        jobName: '',
        jobid: '',
        dateDiff: '',
        localDate: '',
        shortid: '',
        commitMessage: '',
        jobStatus: '',
        pipelineId: '',
        jobRef: '',
        commitUser: '',
        localUrl:'',

      }

    },
    mounted() { 
      this.localUrl = location.href
      this.jobName = this.$route.query.jobName
      this.jobid = this.$route.query.setid
      this.dateDiff = this.$route.query.dateDiff
      this.localDate = this.localDateDiff()
      this.shortid = this.$route.query.shortId
      this.commitMessage = this.$route.query.commitMessage
      this.jobStatus = this.$route.query.jobStatus
      this.pipelineId = this.$route.query.pipelineId
      this.jobRef = this.$route.query.jobRef
      this.commitUser = this.$route.query.commitUser

    },
    methods: {
      localDateDiff() {
        let nowDate = new Date()
        let year = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1;
        let strDate = nowDate.getDate();
        let minute = nowDate.getMinutes();
        let hour = nowDate.getHours();
        let second = nowDate.getSeconds();
        let seperator1 = "-"
        let seperator2 = ":"
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minute >= 0 && minute <= 9) {
          minute = "0" + minute;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate + " " + hour + seperator2 + minute + seperator2 + second
        let paraDate = new Date(this.dateDiff).getTime()
        let localDate = new Date(currentdate).getTime()
        let newDiffDate = localDate - paraDate
        // day
        let dayDiff = Math.floor(newDiffDate / (24 * 3600 * 1000))

        let leave1 = newDiffDate % (24 * 3600 * 1000)
        // hour
        let hourDiff = Math.floor(leave1 / (3600 * 1000))

        if (dayDiff === 0) {

          return hourDiff + " " + "hour ago"
        } else {
          return dayDiff + " " + " day ago"
        }
      },
    },
    

  }

</script>

<style scoped>
  .mainBox {
    height: 100%;
  }

  .extraContent {
    float: left;
    width: 100%;
    margin-left: -304px;
    height: 100%;

  }

  #content {
    margin-left: 304px;
    height: 100%;

  }

  #content span {
    font-size: 14px;
  }

  
  .sidebar {
    width: 300px;
    background: rgb(235, 233, 233);
    border: 2px dotted inherit;
    float: right;
    height: 100%;
    padding: 10px 0;
    /* text-align: center; */

  }

  .sidebar span {
    margin: 0 5px;
    font-size: 14px;
  }
</style>